<template>
  <div class="list-item">
    <div class="top-box">
      <div class="title-box">
        <div class="left-box">
          <img
            class="title-img"
            src="~@/assets/images/3审批申请@2x.png"
            alt=""
          />
          {{ data.order_num }}
        </div>
        <div class="right-box">
          {{ data.create_time }}
        </div>
      </div>
    </div>
    <div class="bottom-box">
      <div class="right">
        <div class="content-box">
          <div>
            <h4>买家姓名</h4>
            {{ data.buyerlist[0].name }}
          </div>
          <div>
            <h4>卖家姓名</h4>
            {{ data.sellerlist[0].name }}
          </div>
          <div>
            <h4>租借天数</h4>
            {{ data.days }}天
          </div>
          <div>
            <h4>订单状态</h4>
            {{
              data.state === 1
                ? "已下单"
                : data.state === 2
                ? "已发货"
                : data.state === 3
                ? "出租中"
                : "交易完成"
            }}
          </div>
        </div>
      </div>
      <div class="left">
        <span @click="look(data)">查看详情</span>
        <img
          @click="look(data)"
          class="title-img"
          src="~@/assets/images/3查看详情@2x.png"
          alt=""
        />
      </div>
    </div>
    <van-dialog v-model="show" :show-confirm-button="false">
      <template #title>
        <img class="title-img" src="~@/assets/images/3审批申请@2x.png" alt="" />
        {{ data.order_num }}
      </template>
      <div class="content">
        <div class="text">
          <div>
            <h4>商品名称</h4>
            {{ data.goodlist[0].name }}
          </div>
          <div>
            <h4>上架时间</h4>
            {{ data.goodlist[0].release_time.substring(0, 10) }}
          </div>
          <div>
            <h4>商品价格</h4>
            {{ data.goodlist[0].price }}
          </div>
          <div>
            <h4>商品成色</h4>
            {{
              data.goodlist[0].fineness === 1
                ? "基本报废"
                : data.goodlist[0].fineness === 2
                ? "使用功能受损"
                : data.goodlist[0].fineness === 3
                ? "破损严重"
                : data.goodlist[0].fineness === 4
                ? "有破损"
                : data.goodlist[0].fineness === 5
                ? "轻微破损"
                : data.goodlist[0].fineness === 6
                ? "有明显擦痕"
                : data.goodlist[0].fineness === 7
                ? "有轻微擦痕"
                : data.goodlist[0].fineness === 8
                ? "有使用痕迹"
                : data.goodlist[0].fineness === 9
                ? "基本全新"
                : data.goodlist[0].fineness === 10
                ? "全新"
                : ""
            }}
          </div>
          <div>
            <h4>买家姓名</h4>
            {{ data.buyerlist[0].name }}
          </div>
          <div>
            <h4>卖家姓名</h4>
            {{ data.sellerlist[0].name }}
          </div>
          <div>
            <h4>租借天数</h4>
            {{ data.days }}天
          </div>
          <div>
            <h4>订单状态</h4>
            {{
              data.state === 1
                ? "已下单"
                : data.state === 2
                ? "已发货"
                : data.state === 3
                ? "出租中"
                : "交易完成"
            }}
          </div>
        </div>
        <div class="btn">
          <van-button
            v-if="userData.id === data.seller_id && data.state == 1"
            @click="release(2)"
            round
            color="#13C093"
            >发货</van-button
          >
          <van-button
            v-if="userData.id === data.buyer_id && data.state == 2"
            @click="release(3)"
            round
            color="#13C093"
            >已收货</van-button
          >
          <van-button
            v-if="userData.id === data.buyer_id && data.state == 3"
            @click="release(4)"
            round
            color="#13C093"
            >归还</van-button
          >
          <van-button @click="close" round color="#13C093">取消</van-button>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { updateOrder } from "@/api/goodslist";
export default {
  name: "Card",
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    userData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      show: false,
    };
  },
  mounted() {},
  methods: {
    look(obj) {
      this.show = true;
    },
    release(val) {
      updateOrder({
        id: this.data.id,
        state: val,
      }).then((res) => {
        this.$Toast("操作成功");
        setTimeout(() => {
          this.show = false;
          this.$emit("update");
        }, 1000);
      });
    },
    close() {
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.top-box {
  margin-bottom: 5px;
  .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left-box {
      font-weight: 500;
      font-size: 26px;
      color: #262a3c;
      line-height: 36px;
      display: flex;
      align-items: center;
      img {
        width: 30px;
        height: 30px;
        margin-right: 10px;
      }
      .tip {
        margin-left: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 38px;
        background: #f0f2f7;
        border-radius: 5px;
        font-size: 22px;
        color: #a8acba;
        line-height: 31px;
      }
      .islook {
        background: #fff2ef;
        color: #e52938;
      }
    }
    .right-box {
      font-weight: 300;
      font-size: 20px;
      color: #838899;
    }
  }
  .content-box {
    font-weight: 400;
    font-size: 24px;
    color: #5c6075;
    line-height: 36px;
    margin-top: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
.bottom-box {
  border-top: 1px solid #d3d5dc;
  font-weight: 400;
  font-size: 24px;
  line-height: 36px;
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  align-items: center;
  .right {
    h4 {
      display: inline-block;
      margin-right: 15px;
    }
  }
  .left {
    color: #13c093;

    img {
      margin-left: 10px;
      width: 10px;
      height: 18px;
    }
  }
}
/deep/.van-dialog__header {
  padding: 30px 50px;
  border-bottom: 1px solid #f0f2f7;
  text-align: left;
  font-weight: 500;
  font-size: 30px;
  color: #262a3c;
  line-height: 40px;
  img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
}

/deep/.van-dialog__content {
  margin: 0px;
  padding: 50px;
  .content {
    .text {
      margin-bottom: 50px;
      font-weight: 400;
      font-size: 26px;
      color: #262a3c;
      line-height: 48px;
      h4 {
        display: inline-block;
        margin-right: 15px;
      }
    }
    .btn {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 20px;
      .van-button--normal {
        width: 50%;
        border-radius: 10px;
        height: 64px;
        font-weight: 400;
        font-size: 28px;
        line-height: 36px;
        background: #eefffb;
      }
      .van-button--round {
        flex: 1;
        border-radius: 10px;
        height: 64px;
        font-weight: 400;
        font-size: 28px;
        color: #ffffff;
        line-height: 36px;
      }
    }
  }
}
</style>
